<script setup>
import { watch, onBeforeUnmount, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useCounterStore } from './stores/counter'
import { useIsSaveLocalStore } from './stores/isSaveLocalStore'
const route = useRoute()

const counterStore = useCounterStore()
const isSaveLocalStore = useIsSaveLocalStore()
watch(() => route.name, (newName) => {
  document.body.className = `bg-${newName || 'default'}`
})
const removeSession = () => {
  if (!isSaveLocalStore.isSave) {
    const [navigationEntry] = performance.getEntriesByType('navigation');
    if (navigationEntry && navigationEntry.type !== 'reload') {
      counterStore.clear()
    }
  }
}

onMounted(() => {
  window.addEventListener('beforeunload', removeSession)
})

onBeforeUnmount(() => {
  window.removeEventListener('beforeunload', removeSession)
})

</script>

<template>
  <div class="app-container">
    <router-view></router-view>
  </div>



</template>

<style>
body {
  margin: 0;
  min-height: 100vh;
  transition: background 0.3s;
  padding: 0;

}

/* 为不同路由设置不同背景 */
body.bg-login {
  background: linear-gradient(to right, #36d1dc, #5b86e5);
}

body.bg-regin {
  background: linear-gradient(to right, #ff758c, #ff7eb3);
}

body.bg-home {
  background: linear-gradient(to right, #43cea2, #185a9d);
}

body.bg-layout {
  background-image: url('@/assets/images/pexels-pixabay-531880.jpg');
  background-size: cover;
  background-position: center;
}
</style>
